<template>
	<view>
	  <!-- 上部分 -->
	  <view class="map_block">
	    <view class="search_block">
	      <view class="search_img"></view>
	      <input class="weui_input" auto-focus placeholder="请输入目的地国家" />
	    </view>
	    <view class="map_list">
	      <view :class="[ zhouId == item.id?'active '+item.key :item.key]"  v-for="item in zhouArr" :key="item.id" @click="changeZhou" :data-id="item.id" :data-name="item.name" :data-key="item.key">{{item.name}}</view>
	    </view>
	  </view>
	  <!-- 热门目的地 -->
	  <view class="hot_block">
	    <!-- 热门地 -->
	    <view class="hot_city">
	      <view class="title">
	        <text class="title_tag">{{zhouName}}热门目的地</text>
	      </view>
	      <view class="hotList_block">
	        <view v-for="item in hotList" :key="item.country_pic_url" class="hot_list">
	          <image class="hot_img" :src="item.country_pic_url"></image>
	          <view class="country">
	            <text>{{ item.country }}</text>
	            <text class="country_en">{{ item.country_en }}</text>
	          </view>
	        </view>
	      </view>
	    </view>
	    <!-- 其他城市 -->
	    <view class="other_city">
	      <view class="title">
	        <text class="title_tag">{{zhouName}}其他目的地</text>
	        <text style="color: #868686;font-size: 14px;">拼音首字母排序</text>
	      </view>
	      <view class="cityList_block">
	        <view v-for="item in cityList" :key="item.country" class="cityList">
	          <text>{{ item.country }}</text>
	          <text style="margin-left: 12rpx;">{{ item.country_en }}</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	//引入封装好的http
	import http from "@/utils/http.js";
	
	export default {
		data() {
			return {
				hotList: [],
				    cityList: [],
				    zhouArr: [{
				        id: 1,
				        name: "欧洲",
				        key: "Europe"
				      },
				      {
				        id: 2,
				        name: "亚洲",
				        key: "Asia"
				      },
				      {
				        id: 3,
				        name: "非洲",
				        key: "Africa"
				      },
				      {
				        id: 4,
				        name: "大洋洲",
				        key: "Oceania"
				      },
				      {
				        id: 5,
				        name: "南美洲",
				        key: "SouthAmerica"
				      },
				      {
				        id: 6,
				        name: "北美洲",
				        key: "NorthAmerica"
				      },
				    ],
				    zhouName: "欧洲",
				    zhouKey: "Europe",
				    zhouId: 1,
				    zhouCity: []
			}
		},
		onLoad: function (options) {
		    this.getZhouData();
		  },
		methods: {
			 getZhouData() {
			    http.request("product/desc/CountryList/" + this.zhouName + "/" + this.zhouKey, "", "get").then(res => {
			       // 热门目的地
				  this.hotList=res.data.hot_country_list,
				  //  // 其他目的地
				  this.cityList=res.data.other_country_list
			    })
			  },
			  //切换洲
			  changeZhou(ev) {
				
				this.zhouName=ev.currentTarget.dataset.name,
				this.zhouKey=ev.currentTarget.dataset.key,
				this.zhouId=ev.currentTarget.dataset.id,
			    this.getZhouData();
			  },
		}
	}
</script>

<style>
.map_block {
  width: 750rpx;
  height: 590rpx;
  background: #f2f2f2;
  padding-top: 45rpx;
  border-bottom: 10px solid #bdc2c3;
}

.search_block {
  position: relative;
  height: 112.5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search_img {
  position: absolute;
  top: 22rpx;
  left: 110rpx;
  background-position: -131.25rpx -325.125rpx;
  display: inline-block;
  background-image: url("http://www.51houniao.com/wx/customer/classic/images/icon_list.png");
  background-repeat: no-repeat;
  width: 65.625rpx;
  height: 65.625rpx;
  background-size: 548.4375rpx;
  vertical-align: middle;
}

.weui_input {
  background-color: #fff;
  width: 76%;
  height: 64rpx;
  line-height: 70rpx;
  border-radius: 40rpx;
  padding-left: 100rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  font-size: 14px;
}

.hot_block {
  width: 750rpx;
  height: max-content;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.hot_city {
  padding: 24rpx 0;
}

.title {
  padding-bottom: 24rpx;
}

.title_tag {
  font-size: 18px;
  color: #445356;
}

.hotList_block {
  width: 704rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.hot_list {
  position: relative;
  margin-bottom: 30rpx;
}

.hot_list,
.hot_img {
  height: 200rpx;
  width: 336rpx;
}

.country {
  position: absolute;
  top: 144rpx;
  left: 20rpx;
  color: #fff;
}

.country_en {
  font-size: 12px;
  margin-left: 12rpx;
}

.other_city .title {
  display: flex;
  justify-content: space-between;
}

.other_city .cityList {
  height: 72rpx;
  line-height: 72rpx;
  border-bottom: 1px dashed #a4a5a5;
  color: #868686;
  font-size: 14px;
}

.map_list {
  height: 421.88rpx;
  width: 684.38rpx;
  position: relative;
  margin: 23.438rpx 32.812rpx;
  font-size: 12px;
  color: #445356;
  /*background: lightblue;*/
}

.Europe {
  width: 375rpx;
  height: 126.26rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/ouzhou.png") center center no-repeat;
  background-size: 375rpx;
  background-position: 0 -213rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  text-align: center;
  padding-top: 80rpx;
}

.Africa {
  position: absolute;
  left: -18.75rpx;
  top: 168.75rpx;
  width: 152.34rpx;
  height: 135.06rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/feizhou.png") center center no-repeat;
  background-size: 152.3438rpx;
  background-position: 0 -168.75rpx;
  z-index: 7;
  text-align: center;
  padding-top: 29rpx;
}

.Asia {
  width: 187.5rpx;
  height: 117.38rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/yazhou.png") center center no-repeat;
  background-size: 187.5rpx;
  background-position: 0 -159.375rpx;
  position: absolute;
  z-index: 8;
  left: 121.875rpx;
  top: 121.875rpx;
  text-align: center;
  padding-top: 42rpx;
}

.Oceania {
  width: 102.5rpx;
  height: 77.75rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/dayangzhou.png") center center no-repeat;
  background-size: 112.5rpx;
  background-position: 0 -103.125rpx;
  position: absolute;
  z-index: 11;
  left: 229.6875rpx;
  top: 285.9375rpx;
  padding-top: 16rpx;
  padding-right: 10rpx;
}

.SouthAmerica {
  width: 88.06rpx;
  height: 149.68rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/nanmei.png") center center no-repeat;
  background-size: 164.0625rpx;
  background-position: 0 -225rpx;
  position: absolute;
  z-index: 10;
  left: 482.8125rpx;
  top: 189.84375rpx;
  padding-top: 80rpx;
  padding-left: 76rpx;
}

.NorthAmerica {
  width: 239.68rpx;
  height: 148.44rpx;
  background: url("https://www.51houniao.com/wx/customer/classic/lib/images/beimei.png") center center no-repeat;
  background-size: 304.68rpx;
  background-position: 0 -243rpx;
  position: absolute;
  left: 375rpx;
  top: -23.4375rpx;
  z-index: 9;
  padding-top: 100rpx;
  padding-left: 65rpx;
}

.active {
  background-position: 0 0;
  color: #cbcaca;
}
</style>
